/* Style YUI components */

/* Add padding and make sure left: float doesn't place them in a row */
/*.customise-dashlets div.available,*/
.customise-dashlets div.instructions,
.customise-dashlets div.used,
.customise-dashlets div.actions
{
   clear: both;
   margin: 0px 10px;
   padding-top: 1em;
   padding-bottom: 1em;
}

/* Make sure left: float doesn't place them in a row */
.customise-dashlets hr
{
   clear: both;
}

/* Marginise and align text and buttons */
.customise-dashlets div.text,
.customise-dashlets div.buttons
{
   margin-left: auto;
   margin-right: auto;
   padding-top: 1em;
   width: 56em;
}

/* Left text */
.customise-dashlets div.text
{
   text-align: left;
}

.customise-dashlets div.text h3
{
   color: #009300;
}

/* Center buttons */
.customise-dashlets div.buttons
{
   padding-bottom: 1em;
   text-align: center;
}

.customise-dashlets a.closeLink
{
   float:right;
   margin-right:1em;
   margin-top:0.6em;
}

/* Style the lists containing dashlets */
.customise-dashlets ul.availableList,
.customise-dashlets ul.usedList
{
   background: #FFFFFF;
   list-style: none;
   margin:0;
   padding:1px;
   text-align: center;
}

.available
{
   /*height:25em;*/
   /*height: 300px;
   overflow: hidden;
   */
}

/* Only the dashlets in the columns should have border */
.customise-dashlets ul.usedList
{
   width: 17.5em;
   height: 14.6em;
   border: 1px solid #BFBFBF;
   padding-top:0.2em;
}

/* Center the available dashlet list, make it wide and ready to handle lots of dashlets*/
.customise-dashlets ul.availableList
{
   width: 56em;
   height: 15.5em;
   overflow-y: auto;
   overflow-x: hidden;
   margin-left: auto;
   margin-right: auto;
   border: 1px dashed #FFFFFF;

}

.customise-dashlets ul.availableList.deleteDrag
{
   border-color: #BFBFBF;
   background-color: #FEFEFE;
}

/* Set the dashlets width and let them flow if the column is wide enough */
/*
.customise-dashlets ul.dashletList li,
.customise-dashlets ul.columnList li
{
   width: 17em;
   float: left;
}
*/

/* Style the dashlets */
.usedDashlet,
.availableDashlet
{
   width: 17em;
   float: left;
   height: 2.5em;
   text-align: left;
   border-style: none;
   border-width: 0;
}

.availableDashlet
{
   margin: 0.5em;
   background-color: #F7F7F7;
   border: 1px dashed #C3C3C3;
}

.usedDashlet
{
   margin: 0.2em;   
   background-color: #F2F8F0;
}

/* Show dashlets a bit darker when they are focused. */
.availableDashlet.dnd-focused
{
   background-color: #E7E7E7;
}

/* Show dashlets a bit darker when they are focused. */
.usedDashlet.dnd-focused
{
   background-color: #E2E8E0;
}

/*
 * Since the a is the one that gets focus we use a transparent gif inside it
 * to make sure IE displays a nice dottec line around the "link".
 * Change the cursor to a move cursor on mouse over.
 */
.usedDashlet a img,
.availableDashlet a img
{
   width: 100%;
   height: 100%;
}

/* Vertically center the text. */
.usedDashlet div ,
.availableDashlet div
{
   background-color:#FFFFFF;
   opacity:0.01;
   filter:alpha(opacity=1);
   height:3em;
   position:relative;
   top:-4.5em;
   width:17em;
}

.usedDashlet span,
.availableDashlet span
{
   position: relative;
   top: -2.2em;
   left: 1em;  
   opacity:1;
   filter:alpha(opacity=100);
}


/* Center the column wrapper div */
.customise-dashlets div.used div
{
   margin-left: auto;
   margin-right: auto;
}

/* Must adjust the width to make the column list centered */
.customise-dashlets div.used div.noOfColumns4
{
   width: 90em;
}

/* Must adjust the width to make the column list centered */
.customise-dashlets div.used div.noOfColumns3
{
   width: 61em;
}

/* Must adjust the width to make the column list centered */
.customise-dashlets div.used div.noOfColumns2
{
   width: 41em;
}

/* Must adjust the width to make the column list centered */
.customise-dashlets div.used div.noOfColumns1
{
   width: 22em;
}

/* Make sure the columns are displayed on row even though they are block elements  */
.customise-dashlets div.used div div.column
{
   float: left;
   padding:1em;
   width:17em;
}

.customise-dashlets div.used div.usedActions
{
   float: left;
   width: 1em;
   padding-top:9em;
   padding-left:0.5em;
}

.customise-dashlets span.trashcan
{
   background-image: url(../images/trash-48.png);
   background-repeat: no-repeat;
   background-position: center;
   padding:1em 1.5em 1.5em;
   line-height: 54px;
}

.customise-dashlets span.trashcan.target
{
   background-image: url(../images/trashdark-48.png);
}
